import 'package:flutter/material.dart';

/// 方向
/// 1. 显示一个box淡入和淡出
/// 2. 定义一个StatefulWidget
/// 3. 展示一个按钮，控制显示
/// 4. 淡入和淡出

class FadeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = "Opacity Demo";
    return MaterialApp(
      title: appTitle,
      theme: ThemeData(primarySwatch: Colors.red),
      home: FadeAppPage(title: appTitle),
    );
  }
}

class FadeAppPage extends StatefulWidget {
  final String title;

  FadeAppPage({Key key, this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _FadeAppPageState();
}

class _FadeAppPageState extends State<FadeAppPage> {
  // 设置View是否可见
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // 定义box
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(microseconds: 50),
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 用于更新UI
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}
